<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>约会推荐 - 社交网站</title>
    
    <!-- 引入所需的CDN文件 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <style>
        :root {
            --primary: #e91e63;
            --primary-light: #fce4ec;
            --secondary: #7b1fa2;
            --accent: #ff9800;
            --light: #f8fafc;
            --dark: #263238;
            --shadow: 0 4px 12px rgba(0,0,0,0.08);
            --transition: all 0.3s ease;
        }
        
        body {
            background-color: #f9f5f7;
            color: var(--dark);
        }
        
        .dating-card {
            transition: var(--transition);
            border-radius: 16px;
            overflow: hidden;
            background-color: white;
            border: none;
            box-shadow: var(--shadow);
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .dating-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 20px rgba(0,0,0,0.12);
        }
        
        .dating-image-container {
            position: relative;
            overflow: hidden;
        }
        
        .dating-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }
        
        .dating-card:hover .dating-image {
            transform: scale(1.07);
        }
        
        .dating-tag {
            position: absolute;
            top: 15px;
            left: 15px;
            font-size: 0.8rem;
            padding: 4px 12px;
            border-radius: 20px;
            background-color: var(--primary);
            color: white;
            font-weight: 500;
            z-index: 2;
        }
        
        .dating-rating {
            position: absolute;
            top: 15px;
            right: 15px;
            font-size: 0.8rem;
            padding: 4px 12px;
            border-radius: 20px;
            background-color: rgba(0,0,0,0.6);
            color: white;
            font-weight: 500;
            z-index: 2;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .dating-rating i {
            color: #ffd700;
        }
        
        .multi-image-grid {
            display: grid;
            gap: 5px;
            height: 100%;
        }
        
        .multi-image-2 {
            grid-template-columns: 1fr 1fr;
        }
        
        .multi-image-3 {
            grid-template-columns: 1fr 1fr;
        }
        
        .multi-image-3 img:last-child {
            grid-column: span 2;
        }
        
        .multi-image-4 {
            grid-template-columns: 1fr 1fr;
        }
        
        .dating-info {
            padding: 1.5rem;
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .dating-title {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
            color: var(--dark);
            transition: var(--transition);
        }
        
        .dating-card:hover .dating-title {
            color: var(--primary);
        }
        
        .dating-meta {
            display: flex;
            align-items: center;
            color: #64748b;
            font-size: 0.85rem;
            margin-bottom: 1rem;
            flex-wrap: wrap;
            gap: 1rem;
        }
        
        .dating-meta i {
            margin-right: 5px;
            color: var(--primary);
        }
        
        .dating-description {
            color: #64748b;
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: 1.25rem;
            flex: 1;
        }
        
        .dating-features {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 1.5rem;
        }
        
        .feature-tag {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 0.8rem;
            padding: 3px 10px;
            border-radius: 15px;
            background-color: var(--primary-light);
            color: var(--primary);
        }
        
        .dating-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: auto;
        }
        
        .price-info {
            text-align: right;
        }
        
        .price {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--primary);
        }
        
        .price-unit {
            font-size: 0.8rem;
            color: #64748b;
        }
        
        .save-btn {
            background-color: transparent;
            color: #64748b;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            padding: 6px 12px;
            font-size: 0.9rem;
            transition: var(--transition);
        }
        
        .save-btn:hover, .save-btn.saved {
            background-color: var(--primary-light);
            color: var(--primary);
            border-color: var(--primary-light);
        }
        
        .view-btn {
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 6px;
            padding: 6px 18px;
            font-size: 0.9rem;
            font-weight: 500;
            transition: var(--transition);
        }
        
        .view-btn:hover {
            background-color: #c2185b;
            transform: translateY(-2px);
        }
        
        .layout-tabs .nav-link {
            color: #64748b;
            border: none;
            border-bottom: 2px solid transparent;
            border-radius: 0;
            padding: 0.5rem 1.25rem;
            font-weight: 500;
        }
        
        .layout-tabs .nav-link.active {
            color: var(--primary);
            border-bottom: 2px solid var(--primary);
            background: transparent;
        }
        
        /* 列表布局样式 */
        .list-layout .dating-card {
            flex-direction: row;
            height: auto;
        }
        
        .list-layout .dating-image-container {
            flex: 0 0 240px;
        }
        
        @media (max-width: 768px) {
            .list-layout .dating-card {
                flex-direction: column;
            }
            
            .list-layout .dating-image-container {
                flex: none;
                height: 200px;
            }
        }
    </style>
</head>
<body>
    <div class="container mt-5 mb-10">
        <h2 class="text-primary fw-bold mb-2">约会推荐</h2>
        <p class="text-secondary mb-6">发现完美的约会地点，创造难忘的回忆</p>
        
        <!-- 布局切换 -->
        <ul class="nav layout-tabs mb-6" id="layoutTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="card-layout-tab" data-bs-toggle="tab" 
                        data-bs-target="#card-layout" type="button" role="tab" 
                        aria-controls="card-layout" aria-selected="true">
                    <i class="fas fa-th-large me-2"></i>卡片布局
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="list-layout-tab" data-bs-toggle="tab" 
                        data-bs-target="#list-layout" type="button" role="tab" 
                        aria-controls="list-layout" aria-selected="false">
                    <i class="fas fa-list me-2"></i>列表布局
                </button>
            </li>
        </ul>
        
        <!-- 约会推荐内容区域 -->
        <div class="tab-content" id="layoutTabsContent">
            <!-- 卡片布局 -->
            <div class="tab-pane fade show active" id="card-layout" role="tabpanel" aria-labelledby="card-layout-tab">
                <div class="row gap-5">
                    <!-- 无图约会推荐 -->
                    <div class="col-12 col-md-6 col-lg-4">
                        <div class="dating-card">
                            <div class="dating-info">
                                <div class="d-flex justify-content-between items-start mb-3">
                                    <span class="dating-tag">体验类</span>
                                    <span class="dating-rating">
                                        <i class="fas fa-star"></i> 4.9
                                    </span>
                                </div>
                                
                                <h3 class="dating-title">双人陶艺制作体验</h3>
                                
                                <div class="dating-meta">
                                    <div><i class="fas fa-map-marker-alt"></i> 创意工坊</div>
                                    <div><i class="far fa-clock"></i> 约2小时</div>
                                </div>
                                
                                <p class="dating-description">
                                    在专业陶艺师的指导下，与伴侣一起动手制作专属陶艺作品。这是一项充满乐趣和互动性的活动，适合想要共同创造回忆的情侣。完成的作品可带回家作为爱情纪念。
                                </p>
                                
                                <div class="dating-features">
                                    <span class="feature-tag"><i class="fas fa-glass-martini-alt"></i> 提供饮品</span>
                                    <span class="feature-tag"><i class="fas fa-parking"></i> 免费停车</span>
                                    <span class="feature-tag"><i class="fas fa-gift"></i> 作品可带走</span>
                                </div>
                                
                                <div class="dating-actions">
                                    <div>
                                        <button class="save-btn me-2">
                                            <i class="far fa-heart"></i> 收藏
                                        </button>
                                        <button class="view-btn">
                                            查看详情
                                        </button>
                                    </div>
                                    <div class="price-info">
                                        <div class="price">¥268</div>
                                        <div class="price-unit">双人套餐</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 单图约会推荐 -->
                    <div class="col-12 col-md-6 col-lg-4">
                        <div class="dating-card">
                            <div class="dating-image-container" style="height: 200px;">
                                <img src="https://picsum.photos/600/400?random=30" alt="浪漫餐厅" class="dating-image">
                                <span class="dating-tag">餐饮类</span>
                                <span class="dating-rating">
                                    <i class="fas fa-star"></i> 4.8
                                </span>
                            </div>
                            
                            <div class="dating-info">
                                <h3 class="dating-title">星空露台餐厅</h3>
                                
                                <div class="dating-meta">
                                    <div><i class="fas fa-map-marker-alt"></i> 市中心顶楼</div>
                                    <div><i class="far fa-clock"></i> 18:00-23:00</div>
                                    <div><i class="fas fa-utensils"></i> 意大利菜</div>
                                </div>
                                
                                <p class="dating-description">
                                    位于城市最高楼顶层的浪漫餐厅，拥有360度全景视野。夜晚可欣赏城市灯光和星空，餐厅提供精致意大利料理和特色鸡尾酒，是情侣约会的理想选择。
                                </p>
                                
                                <div class="dating-features">
                                    <span class="feature-tag"><i class="fas fa-wine-glass-alt"></i> 浪漫氛围</span>
                                    <span class="feature-tag"><i class="fas fa-music"></i> 现场音乐</span>
                                    <span class="feature-tag"><i class="fas fa-star"></i> 需预约</span>
                                </div>
                                
                                <div class="dating-actions">
                                    <div>
                                        <button class="save-btn saved me-2">
                                            <i class="fas fa-heart"></i> 已收藏
                                        </button>
                                        <button class="view-btn">
                                            查看详情
                                        </button>
                                    </div>
                                    <div class="price-info">
                                        <div class="price">¥598+</div>
                                        <div class="price-unit">双人晚餐</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 双图约会推荐 -->
                    <div class="col-12 col-md-6 col-lg-4">
                        <div class="dating-card">
                            <div class="dating-image-container" style="height: 200px;">
                                <div class="multi-image-grid multi-image-2 h-100">
                                    <img src="https://picsum.photos/300/300?random=31" alt="艺术展展厅" class="dating-image">
                                    <img src="https://picsum.photos/300/300?random=32" alt="艺术展作品" class="dating-image">
                                </div>
                                <span class="dating-tag">文化类</span>
                                <span class="dating-rating">
                                    <i class="fas fa-star"></i> 4.7
                                </span>
                            </div>
                            
                            <div class="dating-info">
                                <h3 class="dating-title">沉浸式艺术展+下午茶</h3>
                                
                                <div class="dating-meta">
                                    <div><i class="fas fa-map-marker-alt"></i> 当代艺术馆</div>
                                    <div><i class="far fa-clock"></i> 10:00-17:00</div>
                                    <div><i class="fas fa-calendar-alt"></i> 周末开放</div>
                                </div>
                                
                                <p class="dating-description">
                                    包含沉浸式艺术展门票和双人下午茶套餐。展览结合光影技术和互动装置，创造独特的视觉体验。参观后可在馆内咖啡厅享用精致下午茶，轻松交流感受。
                                </p>
                                
                                <div class="dating-features">
                                    <span class="feature-tag"><i class="fas fa-camera"></i> 适合拍照</span>
                                    <span class="feature-tag"><i class="fas fa-coffee"></i> 含下午茶</span>
                                    <span class="feature-tag"><i class="fas fa-ticket-alt"></i> 门票全包</span>
                                </div>
                                
                                <div class="dating-actions">
                                    <div>
                                        <button class="save-btn me-2">
                                            <i class="far fa-heart"></i> 收藏
                                        </button>
                                        <button class="view-btn">
                                            查看详情
                                        </button>
                                    </div>
                                    <div class="price-info">
                                        <div class="price">¥358</div>
                                        <div class="price-unit">双人套餐</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 三图约会推荐 -->
                    <div class="col-12 col-md-6 col-lg-4">
                        <div class="dating-card">
                            <div class="dating-image-container" style="height: 200px;">
                                <div class="multi-image-grid multi-image-3 h-100">
                                    <img src="https://picsum.photos/300/200?random=33" alt="郊外湖景" class="dating-image">
                                    <img src="https://picsum.photos/300/200?random=34" alt="野餐场景" class="dating-image">
                                    <img src="https://picsum.photos/604/200?random=35" alt="日落景色" class="dating-image">
                                </div>
                                <span class="dating-tag">户外类</span>
                                <span class="dating-rating">
                                    <i class="fas fa-star"></i> 4.9
                                </span>
                            </div>
                            
                            <div class="dating-info">
                                <h3 class="dating-title">湖畔日落野餐</h3>
                                
                                <div class="dating-meta">
                                    <div><i class="fas fa-map-marker-alt"></i> 湖岸公园</div>
                                    <div><i class="far fa-clock"></i> 15:00-19:00</div>
                                    <div><i class="fas fa-sun"></i> 天气依赖</div>
                                </div>
                                
                                <p class="dating-description">
                                    精心准备的湖畔野餐体验，包含豪华野餐篮、舒适坐垫和装饰品。专业团队会提前布置场地，您只需准时赴约，享受美食、湖景和浪漫日落。适合想要远离城市喧嚣的情侣。
                                </p>
                                
                                <div class="dating-features">
                                    <span class="feature-tag"><i class="fas fa-utensils"></i> 美食全包</span>
                                    <span class="feature-tag"><i class="fas fa-camera"></i> 拍照服务</span>
                                    <span class="feature-tag"><i class="fas fa-car"></i> 免费停车</span>
                                </div>
                                
                                <div class="dating-actions">
                                    <div>
                                        <button class="save-btn me-2">
                                            <i class="far fa-heart"></i> 收藏
                                        </button>
                                        <button class="view-btn">
                                            查看详情
                                        </button>
                                    </div>
                                    <div class="price-info">
                                        <div class="price">¥428</div>
                                        <div class="price-unit">双人套餐</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 四图约会推荐 -->
                    <div class="col-12 col-md-6 col-lg-4">
                        <div class="dating-card">
                            <div class="dating-image-container" style="height: 200px;">
                                <div class="multi-image-grid multi-image-4 h-100">
                                    <img src="https://picsum.photos/300/300?random=36" alt="密室逃脱场景1" class="dating-image">
                                    <img src="https://picsum.photos/300/300?random=37" alt="密室逃脱场景2" class="dating-image">
                                    <img src="https://picsum.photos/300/300?random=38" alt="桌游区" class="dating-image">
                                    <img src="https://picsum.photos/300/300?random=39" alt="休息区饮品" class="dating-image">
                                </div>
                                <span class="dating-tag">娱乐类</span>
                                <span class="dating-rating">
                                    <i class="fas fa-star"></i> 4.6
                                </span>
                            </div>
                            
                            <div class="dating-info">
                                <h3 class="dating-title">密室逃脱+桌游之夜</h3>
                                
                                <div class="dating-meta">
                                    <div><i class="fas fa-map-marker-alt"></i> 娱乐中心</div>
                                    <div><i class="far fa-clock"></i> 14:00-22:00</div>
                                    <div><i class="fas fa-gamepad"></i> 互动体验</div>
                                </div>
                                
                                <p class="dating-description">
                                    双人密室逃脱体验加桌游畅玩套餐。选择适合情侣的浪漫或协作主题密室，考验默契与配合。逃脱成功后可在桌游区放松，享用免费饮品，继续愉快互动。
                                </p>
                                
                                <div class="dating-features">
                                    <span class="feature-tag"><i class="fas fa-trophy"></i> 团队协作</span>
                                    <span class="feature-tag"><i class="fas fa-gamepad"></i> 多种桌游</span>
                                    <span class="feature-tag"><i class="fas fa-drink"></i> 免费饮品</span>
                                </div>
                                
                                <div class="dating-actions">
                                    <div>
                                        <button class="save-btn saved me-2">
                                            <i class="fas fa-heart"></i> 已收藏
                                        </button>
                                        <button class="view-btn">
                                            查看详情
                                        </button>
                                    </div>
                                    <div class="price-info">
                                        <div class="price">¥198</div>
                                        <div class="price-unit">双人套餐</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 单图约会推荐 -->
                    <div class="col-12 col-md-6 col-lg-4">
                        <div class="dating-card">
                            <div class="dating-image-container" style="height: 200px;">
                                <img src="https://picsum.photos/600/400?random=40" alt="夜景游船" class="dating-image">
                                <span class="dating-tag">浪漫类</span>
                                <span class="dating-rating">
                                    <i class="fas fa-star"></i> 4.9
                                </span>
                            </div>
                            
                            <div class="dating-info">
                                <h3 class="dating-title">夜游河景游船</h3>
                                
                                <div class="dating-meta">
                                    <div><i class="fas fa-map-marker-alt"></i> 河滨码头</div>
                                    <div><i class="far fa-clock"></i> 19:00-21:00</div>
                                    <div><i class="fas fa-moon"></i> 夜间活动</div>
                                </div>
                                
                                <p class="dating-description">
                                    乘坐豪华游船欣赏城市夜景，船程约2小时。包含双人特调鸡尾酒和精致小点，甲板上可欣赏城市灯光倒影在河面上的浪漫景象，是庆祝纪念日的绝佳选择。
                                </p>
                                
                                <div class="dating-features">
                                    <span class="feature-tag"><i class="fas fa-glass-cheers"></i> 含饮品</span>
                                    <span class="feature-tag"><i class="fas fa-music"></i> 轻音乐</span>
                                    <span class="feature-tag"><i class="fas fa-gift"></i> 纪念照片</span>
                                </div>
                                
                                <div class="dating-actions">
                                    <div>
                                        <button class="save-btn me-2">
                                            <i class="far fa-heart"></i> 收藏
                                        </button>
                                        <button class="view-btn">
                                            查看详情
                                        </button>
                                    </div>
                                    <div class="price-info">
                                        <div class="price">¥699</div>
                                        <div class="price-unit">双人套餐</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 列表布局 -->
            <div class="tab-pane fade" id="list-layout" role="tabpanel" aria-labelledby="list-layout-tab">
                <div class="list-layout space-y-5">
                    <!-- 无图约会推荐（列表） -->
                    <div class="dating-card">
                        <div class="dating-info">
                            <div class="d-flex justify-content-between items-start mb-3">
                                <span class="dating-tag">体验类</span>
                                <span class="dating-rating">
                                    <i class="fas fa-star"></i> 4.9
                                </span>
                            </div>
                            
                            <h3 class="dating-title">双人陶艺制作体验</h3>
                            
                            <div class="dating-meta">
                                <div><i class="fas fa-map-marker-alt"></i> 创意工坊</div>
                                <div><i class="far fa-clock"></i> 约2小时</div>
                                <div class="dating-features d-inline-flex">
                                    <span class="feature-tag"><i class="fas fa-glass-martini-alt"></i> 提供饮品</span>
                                    <span class="feature-tag"><i class="fas fa-parking"></i> 免费停车</span>
                                </div>
                            </div>
                            
                            <p class="dating-description">
                                在专业陶艺师的指导下，与伴侣一起动手制作专属陶艺作品。这是一项充满乐趣和互动性的活动，适合想要共同创造回忆的情侣。完成的作品可带回家作为爱情纪念。
                            </p>
                            
                            <div class="dating-actions">
                                <div>
                                    <button class="save-btn me-2">
                                        <i class="far fa-heart"></i> 收藏
                                    </button>
                                    <button class="view-btn">
                                        查看详情
                                    </button>
                                </div>
                                <div class="price-info">
                                    <div class="price">¥268</div>
                                    <div class="price-unit">双人套餐</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 单图约会推荐（列表） -->
                    <div class="dating-card">
                        <div class="dating-image-container">
                            <img src="https://picsum.photos/600/400?random=30" alt="浪漫餐厅" class="dating-image">
                            <span class="dating-tag">餐饮类</span>
                            <span class="dating-rating">
                                <i class="fas fa-star"></i> 4.8
                            </span>
                        </div>
                        
                        <div class="dating-info">
                            <h3 class="dating-title">星空露台餐厅</h3>
                            
                            <div class="dating-meta">
                                <div><i class="fas fa-map-marker-alt"></i> 市中心顶楼</div>
                                <div><i class="far fa-clock"></i> 18:00-23:00</div>
                                <div><i class="fas fa-utensils"></i> 意大利菜</div>
                                <div class="dating-features d-inline-flex">
                                    <span class="feature-tag"><i class="fas fa-wine-glass-alt"></i> 浪漫氛围</span>
                                    <span class="feature-tag"><i class="fas fa-music"></i> 现场音乐</span>
                                </div>
                            </div>
                            
                            <p class="dating-description">
                                位于城市最高楼顶层的浪漫餐厅，拥有360度全景视野。夜晚可欣赏城市灯光和星空，餐厅提供精致意大利料理和特色鸡尾酒，是情侣约会的理想选择。
                            </p>
                            
                            <div class="dating-actions">
                                <div>
                                    <button class="save-btn saved me-2">
                                        <i class="fas fa-heart"></i> 已收藏
                                    </button>
                                    <button class="view-btn">
                                        查看详情
                                    </button>
                                </div>
                                <div class="price-info">
                                    <div class="price">¥598+</div>
                                    <div class="price-unit">双人晚餐</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 三图约会推荐（列表） -->
                    <div class="dating-card">
                        <div class="dating-image-container">
                            <div class="multi-image-grid multi-image-3 h-100">
                                <img src="https://picsum.photos/300/200?random=33" alt="郊外湖景" class="dating-image">
                                <img src="https://picsum.photos/300/200?random=34" alt="野餐场景" class="dating-image">
                                <img src="https://picsum.photos/604/200?random=35" alt="日落景色" class="dating-image">
                            </div>
                            <span class="dating-tag">户外类</span>
                            <span class="dating-rating">
                                <i class="fas fa-star"></i> 4.9
                            </span>
                        </div>
                        
                        <div class="dating-info">
                            <h3 class="dating-title">湖畔日落野餐</h3>
                            
                            <div class="dating-meta">
                                <div><i class="fas fa-map-marker-alt"></i> 湖岸公园</div>
                                <div><i class="far fa-clock"></i> 15:00-19:00</div>
                                <div><i class="fas fa-sun"></i> 天气依赖</div>
                                <div class="dating-features d-inline-flex">
                                    <span class="feature-tag"><i class="fas fa-utensils"></i> 美食全包</span>
                                    <span class="feature-tag"><i class="fas fa-camera"></i> 拍照服务</span>
                                </div>
                            </div>
                            
                            <p class="dating-description">
                                精心准备的湖畔野餐体验，包含豪华野餐篮、舒适坐垫和装饰品。专业团队会提前布置场地，您只需准时赴约，享受美食、湖景和浪漫日落。适合想要远离城市喧嚣的情侣。
                            </p>
                            
                            <div class="dating-actions">
                                <div>
                                    <button class="save-btn me-2">
                                        <i class="far fa-heart"></i> 收藏
                                    </button>
                                    <button class="view-btn">
                                        查看详情
                                    </button>
                                </div>
                                <div class="price-info">
                                    <div class="price">¥428</div>
                                    <div class="price-unit">双人套餐</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 四图约会推荐（列表） -->
                    <div class="dating-card">
                        <div class="dating-image-container">
                            <div class="multi-image-grid multi-image-4 h-100">
                                <img src="https://picsum.photos/300/300?random=36" alt="密室逃脱场景1" class="dating-image">
                                <img src="https://picsum.photos/300/300?random=37" alt="密室逃脱场景2" class="dating-image">
                                <img src="https://picsum.photos/300/300?random=38" alt="桌游区" class="dating-image">
                                <img src="https://picsum.photos/300/300?random=39" alt="休息区饮品" class="dating-image">
                            </div>
                            <span class="dating-tag">娱乐类</span>
                            <span class="dating-rating">
                                <i class="fas fa-star"></i> 4.6
                            </span>
                        </div>
                        
                        <div class="dating-info">
                            <h3 class="dating-title">密室逃脱+桌游之夜</h3>
                            
                            <div class="dating-meta">
                                <div><i class="fas fa-map-marker-alt"></i> 娱乐中心</div>
                                <div><i class="far fa-clock"></i> 14:00-22:00</div>
                                <div><i class="fas fa-gamepad"></i> 互动体验</div>
                                <div class="dating-features d-inline-flex">
                                    <span class="feature-tag"><i class="fas fa-trophy"></i> 团队协作</span>
                                    <span class="feature-tag"><i class="fas fa-gamepad"></i> 多种桌游</span>
                                </div>
                            </div>
                            
                            <p class="dating-description">
                                双人密室逃脱体验加桌游畅玩套餐。选择适合情侣的浪漫或协作主题密室，考验默契与配合。逃脱成功后可在桌游区放松，享用免费饮品，继续愉快互动。
                            </p>
                            
                            <div class="dating-actions">
                                <div>
                                    <button class="save-btn saved me-2">
                                        <i class="fas fa-heart"></i> 已收藏
                                    </button>
                                    <button class="view-btn">
                                        查看详情
                                    </button>
                                </div>
                                <div class="price-info">
                                    <div class="price">¥198</div>
                                    <div class="price-unit">双人套餐</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 加载更多 -->
        <div class="text-center mt-8">
            <button class="btn btn-outline-primary px-6 py-2 rounded-full hover:bg-primary hover:text-white transition-all">
                发现更多约会灵感 <i class="fas fa-chevron-down ms-2"></i>
            </button>
        </div>
    </div>

    <script>
        // 初始化布局切换
        const layoutTabs = new bootstrap.Tab('#layoutTabs');
        
        // 收藏功能
        document.querySelectorAll('.save-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const icon = this.querySelector('i');
                
                if (this.classList.contains('saved')) {
                    this.classList.remove('saved');
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    this.innerHTML = '<i class="far fa-heart"></i> 收藏';
                } else {
                    this.classList.add('saved');
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    this.innerHTML = '<i class="fas fa-heart"></i> 已收藏';
                }
            });
        });
        
        // 加载更多功能
        document.querySelector('.btn-outline-primary').addEventListener('click', function() {
            this.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i> 加载中...';
            
            // 模拟加载延迟
            setTimeout(() => {
                this.innerHTML = '发现更多约会灵感 <i class="fas fa-chevron-down ms-2"></i>';
                // 实际应用中这里会添加新的约会推荐内容
            }, 1500);
        });
    </script>
</body>
</html>
    
